<template>
  <div>
    <el-page-header @back="goBack" content="查找课程">
    </el-page-header>

    <div style="overflow:hidden; display:flex;justify-content:center;">
      <div style="width: 120px;float: left;margin-right: 5px;">
        <el-select v-model="activityType" placeholder="请选择课程类型">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="前端开发" :value="1"></el-option>
          <el-option label="后端开发" :value="2"></el-option>
          <el-option label="移动开发" :value="3"></el-option>
          <el-option label="前沿技术" :value="4"></el-option>
          <el-option label="运维技术" :value="5"></el-option>
          <el-option label="测试技术" :value="6"></el-option>
          <el-option label="其他技术" :value="7"></el-option>
        </el-select>
      </div>
      <div style="width: 500px;float: left;margin-left: 5px;">
        <el-input placeholder="请输入课程名称" v-model="activitySearch" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>

    <el-card style="width: 900px;display: block;margin: 20px auto 0 auto;" v-show="activityViewList.length > 0">
      <div v-for="(item, index) in activityViewList" :key="item.activityId">
        <div style="overflow:hidden;" @click="toActivityDetail(item.activityId)">
          <div style="height: 180px;width: 240px; float: left;padding-top:10px;padding-bottom: 10px;padding-right: 10px;">
            <div style="background: #FFFFFF" v-if="item.activityLogo === ''"></div>
            <el-image :src="mediaHost + item.activityLogo" fit="cover" v-else>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div style="height: 180px;width:500px; float: left;padding-top:10px;padding-bottom: 10px;padding-right: 10px;">
            <div style="height:50px;font-size: 20px;"> <span v-html="item.activityName"/>
              <el-tag size="mini" v-if="item.activityType === 1">前端开发</el-tag>
              <el-tag size="mini" v-else-if="item.activityType === 2">后端开发</el-tag>
              <el-tag size="mini" v-else-if="item.activityType === 3">移动开发</el-tag>
              <el-tag size="mini" v-else-if="item.activityType === 4">前沿技术</el-tag>
              <el-tag size="mini" v-else-if="item.activityType === 5">运维技术</el-tag>
              <el-tag size="mini" v-else-if="item.activityType === 6">测试技术</el-tag>
              <el-tag size="mini" v-else>其他技术</el-tag>
            </div>
            <div style="overflow: hidden; height: 60px;">
              <div>
                <div style="float: left;">
                  <el-avatar :size="50" :src="mediaHost + item.teacherAvatarUrl"></el-avatar>
                </div>
                <div style="float: left; margin-top: 18px; margin-left: 10px;">
                  {{ item.creator }}
                </div>
                <div style="float: left; margin-top: 18px; margin-left: 10px;">
                  于{{ item.createTimeStr }}开课
                </div>
                <div style="float: left; margin-top: 18px; margin-left: 10px;">
                  截至目前为止有{{ item.authNum }}人在学
                </div>
              </div>
            </div>
            <div style="font-size: small">课程描述：{{ item.activityDesc }}</div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </el-card>

    <!--请求标识-->
    <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
      <i  class="el-icon-loading"></i>
    </div>
    <div v-else-if="activityPage.hasMore === true" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;" @click="loadingMore()">
      <span>--点击加载更多--</span>
    </div>
    <div v-else-if="activityViewList.length > 0" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
      <span>--没有更多数据了--</span>
    </div>
    <div v-else-if="activityViewList.length === 0 && activityPage.hasMore === false" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
      <span>--暂无数据--</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ActivityDiscover",
  data() {
    return {
      mediaHost: this.$global.mediaHost,
      activityViewList: [],
      activityPage: this.$global.indexPage,
      activitySearch: '',
      activityType:0,
      paramsData: {
        page: this.activityPage,
        activitySearch: this.activitySearch,
        activityType: this.activityType
      },
      loadingFlag: false,
    }
  },
  mounted() {
    addEventListener('scroll', this.handleScroll)//监听函数
  },
  methods: {
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        if (this.activityPage.hasMore === true && !this.loadingFlag) {
          this.activityPage.page += 1;
          this.discoverActivityList();
        }
      }
    },
    loadingMore:function () {
      this.activityPage.page += 1;
      this.discoverActivityList();
    },
    goBack() {
      this.$router.push({path: "/homePage"})
    },
    discoverActivityList: function () {
      this.loadingFlag = true
      this.paramsData.page = this.activityPage
      this.paramsData.activitySearch = this.activitySearch
      this.paramsData.activityType = this.activityType
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/discoverActivityList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag = false
          this.activityViewList = this.activityViewList.concat(responseData.pageData.data)
          this.activityPage = responseData.pageData.page
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 查找
     */
    search: function () {
      this.activityPage = this.$global.indexPage
      this.activityViewList = []
      this.discoverActivityList()
    },
    toActivityDetail: function (activityId) {
      this.$router.push({path:"/homePage/activityDetail",query: {activityId : activityId+"", pageName: "activityDiscover"}})
    },
  },
  created() {
    this.discoverActivityList()
  }
}
</script>

<style scoped>

</style>
